<template>
  <div>
    <el-card>
      <el-row :gutter="24" slot="header">
        <el-col :span="10">
          <strong>实验课程</strong>
        </el-col>
        <el-col :span="14" style="display: flex;flex-direction: row-reverse;">
          <el-button type="primary" @click="showParticipate=true">加入实验</el-button>
        </el-col>
      </el-row>
      <el-row>
        <el-table :data="source">
          <el-table-column label="发布教师" prop="username"></el-table-column>
          <el-table-column label="实验名称" prop="experimentName"></el-table-column>
          <el-table-column label="实验课程" prop="courseName"></el-table-column>
          <el-table-column label="实验开始时间">
            <template slot-scope="scope">{{parseDate(scope.row.experimentStartTime)}}</template>
          </el-table-column>
          <el-table-column label="实验结束时间">
            <template slot-scope="scope">{{parseDate(scope.row.experimentEndTime)}}</template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <span v-if="testStatus(scope.row.experimentStartTime)">未开始</span>
              <span v-else-if="!testStatus(scope.row.experimentEndTime)">已经结束</span>
              <span v-else>
                <el-button size="mini" @click="start(scope.row)">开始实验</el-button>
              </span>
            </template>
          </el-table-column>
        </el-table>
      </el-row>
      <el-row>
        <el-pagination :page-size="size" :total="total" :current-page="page" @current-change="load()"></el-pagination>
      </el-row>
      <SE :visible.sync="showParticipate"></SE>
    </el-card>
  </div>
</template>

<script>
import SE from "../../../components/dialog/StartExpiDialog.vue";
import CApi from "../../../api/Course.js";
import RApi from "../../../api/ExpRecord.js";
export default {
  data() {
    return {
      source: [],
      showParticipate: false,
      page: 1,
      size: 15,
      total: 0
    };
  },
  components: {
    SE
  },
  methods: {
    parseDate(ms) {
      let parsed = new Date(ms);
      return `${parsed.getFullYear()}-${parsed.getMonth() +
        1}-${parsed.getDate()} ${parsed.getHours()}:${parsed.getMinutes()}`;
    },
    testStatus(ms) {
      var value = Date.now();
      if (ms > value) {
        return true;
      }
      return false;
    },
    load() {
      this.axios
        .get(CApi.findAll, {
          params: { pageNum: this.page, pageSize: this.size }
        })
        .then(res => {
          if (res.data.status === 0) {
            this.total = res.data.data.total;
            this.source = res.data.data.list;
          }
        });
    },
    start(row) {
      this.axios
        .post(RApi.add, {
          id:row.id,
          params: 2,
          username: this.$store.state.user.username,
          school: this.$store.state.user.school,
          experimentName: row.experimentName,
          courseName: row.courseName,
        })
        .then(res => {
          if (res.data.status == 0) {
            localStorage.setItem("exId", res.data.data); //实验记录Id
            localStorage.setItem("userId", this.$store.state.user.id);
            localStorage.setItem("school", this.$store.state.user.school);
            localStorage.setItem("username", this.$store.state.user.username);
            localStorage.setItem("group", "班级");
            localStorage.setItem("teacher", row.username);
            localStorage.setItem("experimentName", row.experimentName);
          }
          window.location.href = '/zsd/webgl/';
        });
    }
  },
  mounted() {
    this.load();
  }
};
</script>

<style>
</style>
